<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础语法</title>
  <style>
    .active{
      color:white;
      background-color: orangered;
    }
    .one{
      color:blue;
    }
  </style>
  <script src="./vue.js"></script>
</head>
<body>
<div class="d1">
  <h1>1. 绑定css样式 (常用)<hr></h1>
    <!--v-bind可以简化为:-->
    <!--1. 绑定样式，如果isActive这个值是true,代表有active这个样式！-->
    <p :title="title" :class="{active:isActive}">这是段落1</p>
    <button @click="isActive=true">修改isActive的值</button>
    <hr>
    <!--2. 一次可以绑定多个样式,active，one，two是否样式生效取决于其后的变量值-->
    <p :class="{active:isActive,one:true,two:false}">这是段落2</p>
    <h1>2. 绑定style行内样式表(较少)<hr></h1>
    <!-- style中的某些值, 绑定在Vue实例data数据中 -->
    <!-- 动态绑定style-->
    <h2 :style="{ color: fontColor, fontSize: fontSize + 'px' }">哈哈哈哈</h2>
    <!-- 动态的绑定属性, 这个属性是一个对象 -->
    <h2 :style="objStyle">呵呵呵呵</h2>
</div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '.d1',
    data:{
      title: '这是标题,这是来自于vue提供的数据！',
      isActive:false,
      fontColor: 'red',
      fontSize: 20,
      objStyle:{
        color: 'blue',
        fontSize:'18px',
        backgroundColor: 'lightyellow',
        border: '1px dotted red',
        borderRadius: '5px',
        padding: '10px'
      }
    }
  })
</script>
